<template>
  <div class="myflower">
    <div class="flower">
      <p>
        您的小红花：<img src="../assets/images/flower.png" alt="" /><b>×</b
        ><span>{{todayArray.length}}</span>
      </p>
      <p>小红花是什么？</p>
      <p>你每在吾志写一篇日记，就会增加一朵小红花。</p>
      <p>小红花能做什么？</p>
      <p>暂时,它只是一朵小花。</p>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name:"flower",
  computed:{
    ...mapState(['todayArray'])
  }
}
</script>

<style lang="less" scoped>
.myflower {
  width: 100%;
  .flower {
    width: 100%;
    padding-top: 20px;
    margin-bottom: -20px;
    p {
      line-height: 20px;
      color: #808080;
      b {
        margin: 0 5px;
      }
      span {
        font-size: 16px;
      }
      &:nth-of-type(1) {
        font-size: 16px;
        color: #000;
        margin-bottom: 15px;
      }
      &:nth-of-type(3) {
        margin-bottom: 10px;
        padding-left: 1em;
      }
      &:nth-of-type(5) {
        padding-left: 1em;
      }
    }
  }
}
</style>